import { LeftOutlined, RightOutlined, EllipsisOutlined, DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
import style from './index.module.scss';

// 根据当前页和总页数得到渲染数组
const getPrevAndNext = ({ current, onChange, pageCount, pageSize }) => {
    let numList = [];
    if (pageCount <= 7) { // 总页数小于等于7
        numList = new Array(pageCount).fill(null).map((_, i) => i + 1);
    } else { // 总页数大于7
        const arr = [current - 2, current - 1, current, current + 1, current + 2]; // 页码数组
        if (arr[0] < 1) { // 页码数组第一个小于1
            arr.shift();
            arr.push(current + 3);
            if (arr[0] < 1) { // 页码数组第一个小于1
                arr.shift();
                arr.push(current + 4);
            }
        } else if (arr[4] > pageCount) { // 页码数组最后一个大于总页数
            arr.pop();
            arr.unshift(current - 3);
            if (arr[4] > pageCount) { // 页码数组最后一个大于总页数
                arr.pop();
                arr.unshift(current - 4);
            }
        }
        numList = [
            ...(arr[0] - 1 > 1 ? [1, 'prevNum'] : (arr[0] === 1 ? [] : [1])), // 开始页码
            ...arr,
            ...(pageCount - arr[4] > 1 ? ['nextNum', pageCount] : (arr[4] === pageCount ? [] : [pageCount])), // 结束页码
        ];
    }
    return {
        numList, // 页码数组
        prev: ( // 上一页
            <div
                className={`${style.prev} ${current === 1 ? style.disabled : ''}`}
                onClick={() => {
                    current !== 1 && onChange && onChange({
                        current: current - 1,
                        pageSize,
                    });
                }}
            >
                <LeftOutlined/>
            </div>
        ),
        next: ( // 下一页
            <div
                className={`${style.next} ${current === pageCount ? style.disabled : ''}`}
                onClick={() => {
                    current !== pageCount && onChange && onChange({
                        current: current + 1,
                        pageSize,
                    });
                }}
            >
                <RightOutlined />
            </div>
        ),
    };
};

// 页码组件
const PageNumber = (props) => {
    const {
        prev, // 上一页
        next, // 下一页
        numList, // 页码数组
    } = getPrevAndNext(props);
    const { current, onChange, pageCount, pageSize } = props;

    return (
        <>
            {/* 上一页*/}
            {prev}
            {/* 页码*/}
            {
                numList.map(val => {
                    if (val === 'prevNum') { // 页码上一页
                        return (
                            <div
                                className={`${style.pageNumber} ${style.prevNum}`}
                                key={val}
                                onClick={() => {
                                    onChange && onChange({
                                        current: current - 5 > 0 ? current - 5 : 1,
                                        pageSize,
                                    });
                                }}
                            >
                                <EllipsisOutlined className={`${style.default} fz-20`}/>
                                <DoubleLeftOutlined className={style.hover} style={{ color: '#1677ff' }} />
                            </div>
                        );
                    } else if (val === 'nextNum') { // 页码下一页
                        return (
                            <div
                                className={`${style.pageNumber} ${style.nextNum}`}
                                key={val}
                                onClick={() => {
                                    onChange && onChange({
                                        current: current + 5 < pageCount ? current + 5 : pageCount,
                                        pageSize,
                                    });
                                }}
                            >
                                <EllipsisOutlined className={`${style.default} fz-20`}/>
                                <DoubleRightOutlined className={style.hover} style={{ color: '#1677ff' }} />
                            </div>
                        );
                    }
                    // 页码
                    return (
                        <div
                            className={`${style.pageNumber} ${current === val ? style.active : ''}`}
                            key={val}
                            onClick={() => {
                                onChange && onChange({
                                    current: val,
                                    pageSize,
                                });
                            }}
                        >
                            {val}
                        </div>
                    );
                })
            }
            {/* 下一页*/}
            {next}
        </>
    );
};

export default PageNumber;
